define([
	'../api',
	'../index',
    'text!./index.html',
    'css!./index.css',
	'../list/index',
	'../selected/index'
], function(api,ohcard, html, css,
            OhcardList,
            OhcardSelected,
            ) {
    return {
		components: {
			'ohcard-list': OhcardList,
			'ohcard-selected': OhcardSelected,
		},
		props: {
			room:{
				type:Object,
				default:{
					id:0,
					is_adult:0,
				},
			}
		},
	    created(){
	    },
	    mounted:function(){
			this.getSelected();
	    },
	    data: function () {
		    return {
			    explainData:{
				    show: false,
					    title: '使用说明',
					    content: '<p>为什么父亲如此威权？</p><p>妈妈总是想控制一切？</p><p>无法接受老板的行为！</p><p>越来越陌生的亲密伴侣!</p><p>对于每天见面的同事，共同生活的家人，难免都有摩擦，这时往往都有各种主观的声音出现，导致情绪触发，甚至想逃避对方，不愿和他互动。</p><p>当你的思考被情绪制衡时，生命就失去流动性和弹性，此时必须切换至客观角度，用更多面向来看待对方，在这种情况下，我会推荐你使用OH卡《360度阅人术》，让你用更多样的角度观察重要关系人。</p><p>适用时机：与重要关系人和解，避免不理智判断，减缓情绪化互动。</p><p>适用人数：1人</p><p>使用牌卡：图像卡</p><p>操作方法：</p><p>A.决定你要观察的对象，他应是你熟悉的人，可能是父亲、母亲、另一半或是重要的伙伴。</p><p>B.拿出88张图像卡，图面朝上。</p><p>C.逐一审视每张牌，看看这张牌是否与你要观察的人有连结，这个连结可能是对方的工作、习惯、个性、生命事件或是共同经历，将感觉有连结的那些牌全部选出来。</p><p>D.数一下选出的牌，是否有超过10张，如果没有请重新检视一次，确保选出10张以上的图像卡。如果图像卡超过 10张，依你感觉每张牌的连结强度，舍弃连结最弱的牌，直到剩下10张牌为止。最后也是最重要的部分，透过这个牌组，请你向身边的人介绍你观察的对象。</p><p>E.将剩下的10张牌依照连结强弱进行排序，取出最弱的4张牌放在桌面，再取出次弱的3张牌，置于最弱的4张牌上方。</p><p>F.此时手上应该还有3张牌，选出这3张牌中连结较弱的2张,放在桌面3张牌之上。</p><p>G.最后将手上连结最强的那张牌，放在整个牌组的最上方。</p><p>H.这时候，牌组就完成了，在桌面上你会看到由图像卡组成的三角形。</p><p>I.最后也是最重要的部分，透过这个牌组，请你向身边的人介绍你观察的对象。</p><p>提示：</p><p>步骤I是很重要的过程，说出来你对这个人的观察与连结，会唤起许多重要记忆，也能促进情感流动。</p>',
					    tip: true,
			    },
				selected: [],
				selectedIds: [],
		    }
	    },
	    watch:{
			selected:{
				deep:true,
				handler:function(n,o){
					this.selectedIds = this.selected.map((item)=>{return item.id})
					this.saveSelected();
				}
			}
		},
	    methods:{
			getSelected: function(){
				api.getCards({ids:this.room.choose_id})
				.then((res) => {
					this.selected = res.data;
					this.selected = Array.from(new Set(this.selected));
				})
				.catch((res) => {})
			},
			selectHandler: function(card){
				let index = this.selected.findIndex(obj => obj.id === card.id);
				if(index>=0){
					// 取消
					this.selected.splice(index,1);
				}else{
					// 选中
					this.selected.push(card);
				}
				this.selected = Array.from(new Set(this.selected));
			},
			removeHandler: function(index){
				this.selected.splice(index, 1);
			},
			saveSelected: function(){
				let vm = this
				this.room.choose_id = this.selectedIds
				api.identifySelectedSave(this.room.id, this.selectedIds)
				.then(function(res){})
				.catch(function(err){
					Layer.alert(err.msg, {title: false, icon: 2});
				})
			},
			nextHandler:function(){
				if(this.selected.length<10){
					Layer.alert('至少选择10张牌', {title: false, icon: 2});
					return false;
				}
				api.setStep(this.room.id,2)
				.then((res)=>{
					this.room.step = 2;
				})
				.catch((err)=>{Layer.alert(err.msg, {title: false, icon: 2});})
			}
		},
        template: html
    };
});